<template>
  <div class="sqing">
<!--      <div id="topt">-->
<!--      <div class="top">-->
<!--        <img src="../assets/img/sqimg/fanhui.png" alt="" @click="back">-->
<!--        <div class="title-img">家庭成员信息</div>-->
<!--        <span>暂存</span>-->
<!--      </div>-->
          <NavBarTop pageTit="家庭成员信息" :needPhoneTop="false" :needZanC="true"></NavBarTop>
<!--    </div>-->
<div id="banner">

    <div class="info">
        <div class="people-info" v-for="(item,index) in infoArray" :key="index">
                   <van-field v-model="item.name" :label="'家庭成员' + (index + 1)" placeholder="请输入成员名"
  input-align="right" :border="false" />
     <van-field v-model="item.guanxi" label="关系" placeholder="请输入关系" :border="false"
  input-align="right" />
       <!-- <van-field v-model="item.phone" label="联系电话" placeholder="请输入联系电话" :border="false"
  input-align="right" /> -->
  <van-field
    v-model="item.zjname"
    name="申请人"
    label="申请人姓名"
    required
    placeholder="请输入姓名" input-align="right"
    :rules="[{ required: true,}]"
  />
  <!-- 民族 -->
  <van-field
  v-model="item.minzu"
  is-link
  readonly
    required
  label="民族"
  placeholder="请选择民族" input-align="right"
  @click="showmz = true"
/>
<van-popup v-model="showmz" round position="bottom">
  <van-cascader
    v-model="item.cascaderValuemz"
    title="请选择民族"
    :options="optionsmz"
    @close="showmz = false"
    @finish="({selectedOptions})=>onFinishmz({selectedOptions},index)"
  />
</van-popup>
<!-- 证件类别 -->

  <van-field
  v-model="item.leibie"
  is-link
  readonly
    required
  label="证件类别"
  placeholder="请选择证件类别" input-align="right"
  @click="showzj = true"
/>
<van-popup v-model="showzj" round position="bottom">
  <van-cascader
    v-model="item.cascaderValuezj"
    title="请选择证件类别"
    :options="optionszj"
    @close="showzj = false"
    @finish="({selectedOptions})=>onFinishzj({selectedOptions},index)"
  />
</van-popup>

<!-- 证件号码 -->
<van-field
    v-model="item.haoma"
    type="haoma"
    name="证件号码"
    label="证件号码"
    required
    placeholder="请输入证件号码" input-align="right"
    :rules="[{ required: true, }]"
  />
  <!-- 详细户籍地 -->
  <van-field
    v-model="item.huji"
    type="huji"
    name="详细户籍地"
    required
    label="详细户籍地"
    placeholder="请输入详细地址" input-align="right"
    :rules="[{ required: true, }]"
  />
  <!-- 详细现居地 -->
<van-field
    v-model="item.xianju"
    type="xianju"
    name="详细现居地"
    label="详细现居地"
    placeholder="请输入详细现住址" input-align="right"
    :rules="[{ required: true, }]"
  />

<!-- 联系电话 -->
  <van-field
    v-model="item.dianhua"
    type="dianhua"
    name="联系电话"
    label="联系电话"
    placeholder="请输入联系电话" input-align="right"
    :rules="[{ required: true, }]"
  />
  <!-- 婚姻状况 -->
  <van-field
  v-model="item.funkuang"
  is-link
  readonly
  label="婚姻状况"
  placeholder="请选择婚姻状况" input-align="right"
  @click="showhk = true"
/>
<van-popup v-model="showhk" round position="bottom">
  <van-cascader
    v-model="item.cascaderValuehk"
    title="请选择婚姻状况"
    :options="optionshk"
    @close="showhk = false"
    @finish="({selectedOptions})=>onFinishhk({selectedOptions},index)"
  />
</van-popup>
<!-- 教育程度 -->

  <van-field
  v-model="item.jiaoyu"
  is-link
  readonly
  label="教育程度"
  placeholder="请选择文化程度" input-align="right"
  @click="showjy = true"
/>
<van-popup v-model="showjy" round position="bottom">
  <van-cascader
    v-model="item.cascaderValuejy"
    title="请选择文化程度"
    :options="optionsjy"
    @close="showjy = false"
    @finish="({selectedOptions})=>onFinishjy({selectedOptions},index)"
  />
</van-popup>
<!-- 就业情况 -->
  <van-field
  v-model="item.jiuye"
  is-link
  readonly
  label="就业情况"
  placeholder="请选择就业情况" input-align="right"
  @click="showjycd = true"
/>
<van-popup v-model="showjycd" round position="bottom">
  <van-cascader
    v-model="item.cascaderValuejycd"
    title="请选择就业情况"
    :options="optionsjycd"
    @close="showjycd = false"
    @finish="({selectedOptions})=>onFinishjycd({selectedOptions},index)"
  />
</van-popup>
<!-- 月收入（元） -->

  <van-field
  v-model="item.shouru"
  is-link
  readonly
  label="月收入（元）"
  placeholder="请选择月收入" input-align="right"
  @click="showyr = true"
/>
<van-popup v-model="showyr" round position="bottom">
  <van-cascader
    v-model="item.cascaderValueyr"
    title="请选择月收入"
    :options="optionsyr"
    @close="showyr = false"
    @finish="({selectedOptions})=>onFinishyr({selectedOptions},index)"
  />
</van-popup>
<!-- 所属群体 -->

  <van-field
  v-model="item.qunti"
  is-link
  readonly
  label="所属群体"
  placeholder="请选择所属群体" input-align="right"
  @click="showqt = true"
/>
<van-popup v-model="showqt" round position="bottom">
  <van-cascader
    v-model="item.cascaderValueqt"
    title="请选择所属群体"
    :options="optionsqt"
    @close="showqt = false"
    @finish="({selectedOptions})=>onFinishqt({selectedOptions},index)"
  />
</van-popup>
      <!-- <img class="xiala-icon" src="../assets/img/sqimg/xiala.png" alt=""> -->
      <div class="border1"></div>
        </div>

    </div>

<div class="btn3" @click="addPeople">
    <img src="../assets/img/sqimg/jia1.png" alt="">
    <span class="btn3-text">添加家庭成员信息</span>
</div>

<p class="p">若家庭无其他成员，请直接点击“下一步”按钮</p>

<div style="margin: 16px;" class="divbtn">
    <van-button round block type="info" @click="onsubmit" >下一步</van-button>
  </div>




</div>

  </div>
</template>

<script>
import { Button, Cell, CellGroup, Icon, Image as VanImage, NavBar,Form ,Field,Cascader ,Popup,Divider  } from "vant";
import  NavBarTop from '@/components/navBar.vue'
export default {
    name: "sqing",
  components: {
      NavBarTop,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [VanImage.name]: VanImage,
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Cascader.name]: Cascader,
    [Popup.name]: Popup,
    [Divider.name]: Divider,
  },
  data() {
    return {
    infoArray:[
    ],

    //
      showmz: false,
      showzj:false,
      // fieldValue: '',
      cascaderValuemz: '',
      // fieldValuezj: '',
      cascaderValuezj: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      optionsmz: [
        {
          text: '汉族',
          value: '330000',
        },
        {
          text: '其他',
          value: '320000',
        },
      ],
       optionszj: [
        {
          text: '身份证',
          value: '33000',
        },
        {
          text: '驾驶证',
          value: '32000',
        },
        {
          text: '护照',
          value: '32001',
        },
      ],

       showhk: false,
      showjy:false,
      // fieldValuehk: '',
      cascaderValuehk: '',
      // fieldValuejy: '',
      cascaderValuejy: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      optionshk: [
        {
          text: '未婚',
          value: '330000',
        },
        {
          text: '已婚',
          value: '320000',
        },
      ],
       optionsjy: [
           {
               text: '高中',
               value: '33000',
           },
           {
               text: '专科',
               value: '32900',
           },
           {
               text: '本科',
               value: '32000',
           },
           {
               text: '硕士',
               value: '32001',
           },
           {
               text: '博士',
               value: '32002',
           }
      ],
      showyr: false,
      showjycd: false,
      showqt:false,
      // fieldValueyr: '',
      cascaderValueyr: '',
      // fieldValuejycd: '',
      cascaderValuejycd: '',
      // fieldValueqt: '',
      cascaderValueqt: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      optionsyr: [
        {
          text: '小于3000',
          value: '321100',
        },
        {
          text: '3000-8000',
          value: '330000',
        },
        {
          text: '8000-15000',
          value: '320000',
        },
        {
          text: '大于15000',
          value: '321000',
        },
      ],
      optionsjycd: [
        {
          text: '在职',
          value: '321100',
        },
        {
          text: '离职',
          value: '330000',
        }
      ],
       optionsqt: [
        {
          text: '外省农村',
          value: '33000',
        },
        {
          text: '外省城镇',
          value: '32900',
        },
        {
          text: '省内农村',
          value: '32000',
        },
        {
          text: '省内城镇',
          value: '32001',
        },
      ],
      index:''
    };
  },
methods:{
   onsubmit() {
      // console.log('submit', values);
    this.$router.push('/shenq4')
    },
    back(){
        this.$router.go(-1)
    },
    addPeople(){
        let obj = {
            name:"",
            zjname:'',
            guanxi:"",
            phone:"",
            minzu: '',
            leibie:'',
            haoma:'',
            huji:'',
            xianju:'',
            dianhua:'',
            funkuang:'',
            jiaoyu:'',
            jiuye:'',
            shouru:'',
            qunti:'',
        }
        this.infoArray.push(obj)
    },
    // showname(index) {

    // },
    // 民族
    onFinishmz({ selectedOptions },index) {
      this.showmz = false;
      this.infoArray[index].minzu = selectedOptions.map((option) => option.text).join('/');
      // console.log(this.minzu)
      // console.log(index)
    },
    // 证件类型
     onFinishzj({ selectedOptions },index) {
      this.showzj = false;
      this.infoArray[index].leibie = selectedOptions.map((option) => option.text).join('/');
    },
    // 婚姻
    onFinishhk({ selectedOptions },index) {
      this.showhk = false;
      this.infoArray[index].funkuang = selectedOptions.map((option) => option.text).join('/');
    },
    // 教育
    onFinishjy({ selectedOptions },index) {
      this.showjy = false;
      this.infoArray[index].jiaoyu = selectedOptions.map((option) => option.text).join('/');
    },
    // 月收入
    onFinishyr({ selectedOptions },index) {
      this.showyr = false;
      this.infoArray[index].shouru = selectedOptions.map((option) => option.text).join('/');
    },
    // 群体
    onFinishqt({ selectedOptions },index) {
      this.showqt = false;
      this.infoArray[index].qunti = selectedOptions.map((option) => option.text).join('/');
    },
    // 就业
    onFinishjycd({ selectedOptions },index) {
      this.showjycd = false;
      this.infoArray[index].jiuye = selectedOptions.map((option) => option.text).join('/');
    },
    // onConfirm(value) {
    //   this.jtcy[this.showpack].fieldValuezj = value;
    //   this.showPicker = false;
    // },
    // //  onChange(picker, value, index) {
    // //   Toast(`当前值：${value}, 当前索引：${index}`);
    // //   console.log(picker)
    // // }
    // showp(index){
    //   this.showPicker = true
    //   console.log(index)
    //   this.showpack=index
    // }
}

}
</script>

<style scoped>
 ::v-deep .van-button--plain.van-button--info{
margin-left: .15rem;
}
::v-deep .van-field__control--right{
  color: #666666;
}
.ren{
    display: flex;
    justify-content: space-between;
    /* margin: 0rem .15rem; */
    /* border-bottom: .01rem solid gray; */
}
.guanx{
    /* margin: 20 auto; */
    margin-top: .20rem;
    height: 1.7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
/* ::v-deep .van-hairline--top-bottom::after, ::v-deep .van-hairline-unset--top-bottom::after{
border-width:none;
} */

.chengh{
    width: .65rem;
height: .20rem;
font-size: .14rem;
font-family: Source Han Sans SC;
font-weight: 400;
line-height: .0rem;
color: #2D2D2D;
opacity: 1;
}
.ming{
    width: .42rem;
height: .20rem;
font-size: .14rem;
font-family: Source Han Sans SC;
font-weight: 400;
line-height: 0rem;
color: #2D2D2D;
opacity: 0.4;
}
.people-info .border1{
  width: 100%;
  height: .06rem;
  background: #F2F3F5;
  border: none;
}
.btn3{

width: 3.45rem;
height: .51rem;
border: .01rem solid #2B8FF3;
opacity: 1;
border-radius: .28rem !important;
font-size: .15rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: .15rem;
}
.btn3 img{
    width: .22rem;
    height: .22rem;
}
.btn3 .btn3-text{
    margin-left: .25rem;
}
.p{
    width: 2.52rem;
height: .18rem;
font-size: .12rem;
font-family: Source Han Sans SC;
font-weight: bold;
line-height: 0rem;
color: #2D2D2D;
opacity: 1;
margin-left: .20rem;
margin-top: .40rem;
}
.divbtn{
  width: 3.45rem;
  /* position: absolute; */
  /* bottom: 10px; */
}
.info{
    width: 100%;
}
.people-info{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-self: start;
    align-items: center;
}
.people-info .xiala-icon{
margin: 0 auto;
padding: .1rem 0;
}

#topt{
  background: url('../assets/img/sqimg/xhg.png') no-repeat;

}
.top img{
  width: .08rem;
  height: .14rem;
padding-left: 20px;
  /* float: left; */
}
.title-img{
  /* height: 25px; */
font-size: .17rem;
font-family: Source Han Sans SC;
font-weight: bold;
line-height: 0px;
display: inline;
padding-left: 100px;
color: #2D2D2D;
opacity: 1;
}
.top span{
    font-size: .15rem;
    font-weight: bold;
color: #2D2D2D;
    margin-left: 1rem;
}
</style>
